<template>
  <!--登陆表单，纯样式-->
  <div class="loginform">
    <div class="loginform-left"></div>
    <div class="loginform-right">
      <slot name="default"></slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>


<style lang="scss" scoped>
@import "@/assets/source.scss";
@import "@/assets/screen.scss";

.loginform {
  $loginform-padding-left-right: 5%;
  padding: 10vh $loginform-padding-left-right;
  width: 100%- ($loginform-padding-left-right * 2);
  @media (min-width: $media-screen-width) {
    $loginform-padding-left-right: 20%;
    padding: 10vh $loginform-padding-left-right;
    width: 100%- ($loginform-padding-left-right * 2);
  }
  overflow: hidden;
}
.loginform-left,
.loginform-right {
  box-shadow: $box-shadow-type1;
  background-color: #fff;
}
.loginform-right {
  padding: 5vh 5%;
}
@media (min-width: $media-screen-width) {
  .loginform-left,
  .loginform-right {
    float: left;
  }
  .loginform-left {
    width: 43%;
    height: 60vh;
    background-image: url("../../assets/wallhaven-751364.jpg");
    background-size: cover;
    background-position: center;
  }
  .loginform-right {
    width: 49%;
    height: 30vh;
    padding: 15vh 4%;
  }
}
</style>